<template>
	<div class="system-menu">
		<el-row :gutter="8" style="width: 100%">
			<el-col :span="3" :xs="24">
				<el-card>
					<h3 style="line-height: 50px; text-align: center">{{ $t('3r2FlPOWtIwAoavmSIfU') }}</h3>
					<el-radio-group v-model="radioActiveId" class="ml-4" @change="radioChangeHandle" style="width: 100%">
						<ul style="width: 100%">
							<li v-for="(v, k) in appList" :key="k" style="line-height: 40px; width: 100%" class="radio-item">
								<el-radio :label="v.name" size="large" style="width: 100%; display: flex; justify-content: center"></el-radio>
							</li>
						</ul>
					</el-radio-group>
				</el-card>
			</el-col>
			<el-col :span="21" :xs="24">
				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
					<el-form ref="queryForm" :inline="true">
						<el-form-item :label="$t('k8Gj10uoLyca3XwWuVwEr')" prop="title">
							<el-input :placeholder="$t('k8Gj10uoLyca3XwWuVwEr')" clearable />
						</el-form-item>
						<el-form-item :label="$t('aINxgRdAULWxYv20Kzw')" prop="type">
							<el-select :placeholder="$t('gbDbzqDuTe94Ip1skHlE')" clearable>
								<el-option :label="$t('x9zhgdNyi8nIWjO75jh')" :value="1" />
								<el-option :label="$t('5Kw9tW6vnvtUwfAWpIuZh')" :value="2" />
								<el-option :label="$t('uKlR2Plv6edDfN2mltxS')" :value="3" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button icon="ele-Refresh"> {{ $t('0DfVsrgo0iWoJyo8YoSfA') }} </el-button>
							<el-button type="primary" icon="ele-Search"> {{ $t('9dPtqOlHYjukpe0IydVKs') }} </el-button>
							<el-button icon="ele-Plus" @click="openAddMenu"> {{ $t('8Go5Ln_3qnNgb8npBvhHo') }} </el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<el-card style="margin-top: 8px">
					<el-table :data="menuList" style="width: 100%" border row-key="id" :tree-props="{ children: 'children', hasChildren: true }">
						<el-table-column prop="name" :label="$t('k8Gj10uoLyca3XwWuVwEr')" align="center" />
						<el-table-column prop="type" :label="$t('a4_4cDBvNcpnlyqagd2tk')" align="center">
							<template #default="scope">
								<el-tag type="warning" v-if="scope.row.type == 0">{{ $t('x9zhgdNyi8nIWjO75jh') }}</el-tag>
								<el-tag v-else-if="scope.row.type == 1">{{ $t('5Kw9tW6vnvtUwfAWpIuZh') }}</el-tag>
								<el-tag type="info" v-else-if="scope.row.type == 2">{{ $t('uKlR2Plv6edDfN2mltxS') }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="icon" :label="$t('flKIdKezj01J9hO3PdX')" align="center">
							<template #default="scope">
								<SvgIcon :name="scope.row.icon" />
							</template>
						</el-table-column>
						<el-table-column prop="sort" :label="$t('ivdjt7Bot7XrcZX12b3a')" align="center" />
						<el-table-column prop="permission" :label=" $t('r078Hwir7IkcCgT4miB3y')" align="center" />
						<el-table-column prop="visible" :label="$t('nwnuUvDqOGn9ua4laWWbO')" align="center">
							<template #default="scope">
								<el-tag type="success" v-if="scope.row.visible === 'Y'">{{ $t('zWqZx2KaJeu12xMwIihn') }}</el-tag>
								<el-tag type="danger" v-else-if="scope.row.visible === 'N'">{{ $t('pHQhVtcZuGLoYbPpYsY') }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="component" :label="$t('nr6ZbcgVnc6ocgoPbMl4t')" align="center" />
						<el-table-column prop="router" :label="$t('qlo4dC_5Kqqthr7jlxIwb')" align="center" />
						<el-table-column :label="$t('s0yg_8Mx2Izv3aNvEafDg')" align="center">
							<template #default="scope">
								<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditMenu(scope.row)"> {{ $t('hTgXnOh1o8lpoVyK7veb') }} </el-button>
								<el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="InfoFilled" icon-color="#626AEF" :title="$t('nZ1cI3Dfo0sMIiTTHnmx')" @confirm="deleteMenuHandle(scope.row.id)">
									<template #reference>
										<el-button icon="ele-Delete" size="small" text type="danger"> {{ $t('arAQiFeeBbj831NKd5aE9') }} </el-button>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<EditMenu ref="editMenuRef" :title="editMenuTitle" :applicationData="appList" :menuData="menuList" @updateData="getMenuData(currentCode)" />
	</div>
</template>
<script lang="ts">
import { getAppList } from '/@/api/system/app/index';
import { getMenuListById, deleteMenuItem } from '/@/api/system/menu/index';
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import EditMenu from './component/editMenu.vue';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;
interface reactiveType {
	appList?: any[];
	menuList?: any[];
	[propName: string]: any;
	editMenuTitle: string;
	radioActiveId: number | string;
	currentCode: any;
}
export default defineComponent({
	name: 'systemMenu',
	components: {
		EditMenu,
	},
	setup() {
		const state = reactive<reactiveType>({
			appList: [],
			radioActiveId: 0,
			menuList: [],
			editMenuTitle: '', // 表单标题
			currentCode: 0,
		});

		const editMenuRef = ref();

		// 获取应用数据
		const getListData = async () => {
			try {
				let res: { data: any[] } = await getAppList();
				state.appList = res.data;
				let fistItem: any = res.data[0];
				state.radioActiveId = fistItem.name;
				state.currentCode = fistItem.code;
				getMenuData(fistItem.code);
			} catch (err) {}
		};

		// 获取菜单数据
		const getMenuData = async (code: any) => {
			let params: { application: any } = {
				application: code,
			};
			let res: { data: any[] } = await getMenuListById(params);
			state.menuList = res.data;
		};

		// 打开编辑页面
		const openEditMenu = (row: any) => {
			state.editMenuTitle = $t('pnJ1ZCvyHy5bcAdY4uxgF');
			editMenuRef.value.openDialog(row);
		};

		// 删除菜单
		const deleteMenuHandle = async (id: number | string) => {
			try {
				let res = await deleteMenuItem({ id });
				getMenuData(state.currentCode);
			} catch (err) {
			} finally {
			}
		};
		// 打开新增页面
		const openAddMenu = () => {
			state.editMenuTitle = $t('nzYj7iajbx0eaP7KuLlee');
			editMenuRef.value.openDialog({
				type: 0,
				isAffix: false,
				isHide: false,
				isIframe: false,
				isKeepAlive: false,
			});
		};

		// 应用切换
		const radioChangeHandle = (v: any) => {
			let filterArr: any[] = state.appList!.filter((item: any) => {
				return item.name == state.radioActiveId;
			});
			let selectItem: { code: any } = filterArr[0];
			state.currentCode = selectItem.code;
			getMenuData(state.currentCode);
		};

		onMounted(() => {
			getListData();
		});

		return {
			...toRefs(state),
			editMenuRef,
			openEditMenu,
			openAddMenu,
			radioChangeHandle,
			deleteMenuHandle,
			getListData,
			getMenuData,
		};
	},
});
</script>
<style lang="scss" scoped>
.system-menu {
	// text-align: center;
	ul {
		list-style: none;
		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}
	.radio-item {
		:deep(.el-radio__inner) {
			// margin-right: 10%;
		}
	}
}
</style>
